<template>
  <div class="app-container">
    <div  class="back-container">
      <div class="left-container">
        <img src="./assets/login/01.jpg" alt="">
      </div>
      <div class="right-container">
        <el-form class="right-container-form">
          <h2 class="tatle">登录</h2>
          <el-form-item class="right-container-form-item">
            <el-input
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item class="right-container-form-item">
            <el-input
              type="password"
              placeholder="密码"
              prefix-icon="lock"
            ></el-input>
          </el-form-item>
          <div class="inbox">
            <el-form-item>
              <el-button type="primary" class="right-container-form-button">登录</el-button>
              <el-button type="info" class="right-container-form-button">注册</el-button>
            </el-form-item>
          </div>
          <el-link type="primary" class="right-container-form-link">
            注册账号
          </el-link>
          <el-link type="primary" class="right-container-form-link">
            找回密码
          </el-link>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style scoped>
.app-container {
  height: 100vh;/* 这里的高度是相对于视口（Viewport）的高度，即浏览器窗口的可视区域。100vh意味着元素将占据整个视口的高度。*/
  background-color: #D97C5D;
  display: flex;/* 将父容器设置为Flex容器*/
  align-items: center;/* flex容器中的子元素垂直方向居中*/
  justify-content: center;/* flex容器中的子元素水平方向居中*/
}

.back-container{
  width: 1600px;
  height: 800px;
  display: flex;
  background-color: #E0E5E3;
  border-radius: 20px;
  display: flex;/* 将父容器设置为Flex容器*/
  justify-content: space-between;/* 第一个子元素靠左对齐，最后一个子元素靠右对齐，剩余的子元素在中间均匀分布*/
  /**
  justify-content: flex-start;：子元素靠左对齐。
  justify-content: flex-end;：子元素靠右对齐。
  justify-content: center;：子元素居中对齐。
  justify-content: space-around;：子元素均匀分布，每个子元素两侧的间距相等。
  justify-content: space-evenly;：子元素均匀分布，所有间距（包括边缘）相等。
   */
  align-items: center;/* flex容器中的子元素垂直方向居中*/
  padding: 20px;/*为元素的四个边（上、右、下、左）设置相同的内边距。*/
}

.left-container{
  width: 78%;
  height: 99%;
  background-color: #4B2C2E;
  border-radius: 20px;
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;/*图像将被缩放，以完全覆盖容器，同时保持其宽高比。如果图像的宽高比与容器不同，图像将被裁剪以适应容器。*/
    border-radius: 20px;
  }
}

.right-container{
  width: 460px;
  height: 350px;
  background-color: rgba(0, 0, 0, 0);
  background-color: aliceblue;
  border-radius: 15px;
  opacity: 0.6;/* 设置透明度 */
  margin-left: 20px;
}
.right-container-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 增加间隙以居中显示输入框 */
}

.right-container-form-item {
  width: 350px;
  height: 40px;
  display: flex; /* 将输入框设置为Flex容器 */
  align-items: center; /* 垂直方向居中 */
  justify-content: center; /* 水平方向居中 */
}

.inbox{
  width: 350px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-container-form-button{
  width: 100px;
  height: 40px;
  border-radius: 15px;
  margin: 10px;
}
.right-container-form-link{
  font-size: 12px;
  font-size: 12px;
  align-self: flex-start; /* 添加这一行，确保链接在左边 */
  margin-left: 30px;
}
</style>
